<template>
  <div>
    <el-dialog
      @open="
        () => {
          this.editObj = this.obj;
        }
      "
      title="修改申请信息"
      :visible.sync="dialogInfo.dialogVisible"
    >
      <el-form :model="editObj" label-width="110px" ref="formRef">
        <el-row>
          <el-col :span="12"
            ><el-form-item label="申请类型" prop="type">
              <el-select v-model="editObj.type" placeholder="请选择" @change="$forceUpdate()">
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="投入品" prop="supplyName">
              <el-select
                @change="
                  (index) => {
                    this.editObj.supplyName = this.ShopSupplyInfo[index].name;
                    this.editObj.supplyType = this.ShopSupplyInfo[index].type;
                    this.editObj.supplyId = this.ShopSupplyInfo[index].id;
                    this.editObj.supplier = this.ShopSupplyInfo[
                      index
                    ].supplierId;
                    this.editObj.specification = this.ShopSupplyInfo[
                      index
                    ].specification;
                    this.editObj.skuNumber = this.ShopSupplyInfo[
                      index
                    ].skuNumber;
                  }
                "
                v-model="editObj.supplyName"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in ShopSupplyInfo"
                  :key="index"
                  :label="item.name"
                  :value="index"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="购买日期" prop="purchaseTime">
              <el-date-picker
                type="datetime"
                v-model="editObj.purchaseTime"
                placeholder="选择时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12" v-show="editObj.type === 1">
            <el-form-item label="操作日期" prop="operationTime">
              <el-date-picker
                type="datetime"
                v-model="editObj.operationTime"
                placeholder="选择时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="数量" prop="amount">
              <el-input-number
                controls-position="right"
                :min="0"
                v-model="editObj.amount"
              ></el-input-number> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="投入品规格">
              <el-select v-model="editObj.specification" placeholder="请选择">
                <el-option
                  v-for="item in specificationList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"
            ><el-form-item label="基地仓库" prop="warehouseId">
              <el-select
                v-model="editObj.baseName"
                placeholder="请选择基地"
                @change="handle"
              >
                <el-option
                  v-for="item in baseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option> </el-select></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-select
              v-model="dialogInfo.warehouseName"
              placeholder="请选择仓库"
              @change="chooseWareHouse"
            >
              <el-option
                v-for="(item, index) in wareHouseList"
                :key="item.id"
                :label="item.name"
                :disabled="!item.managerId"
                :value="index"
              >
              </el-option> </el-select
          ></el-col>
        </el-row>
        <el-form-item label="图片证明">
          <el-upload
            class="avatar-uploader"
            :action="actionUrl"
            :on-success="handlePicSuccess"
          >
            <img v-if="editObj.picture" :src="editObj.picture" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input type="textarea" v-model="editObj.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            () => {
              this.$emit('close');
            }
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="editEvent" v-auth="'breed_input_access_update'">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getAllWarehouseInfo } from "../../../Api/productionmanage/Supply_warehouse";
import {
  getApplicationDetail,
  editApplication,
} from "../../../Api/productionmanage/applicantAndManage";
export default {
  props: {
    dialogInfo: {
      type: Object,
    },
    obj: {
      type: Object,
    },
  },
  data() {
    return {
      editObj: {},
      warehouseName: "",
      wareHouseList: [],
      baseId: "",
      actionUrl: "http://120.77.156.205:9610/file/upload",
    };
  },
  computed: {
    ...mapState({
      staffInfoList: (state) => state.roleInfo.staffInfo, //企业所有角色信息
      ShopSupplyInfo: (state) => state.productionInfo.ShopSupplyInfo,
      baseList: (state) => state.productionInfo.baseInfoList, //企业基地
      typeList: (state) => state.productionInfo.typeList,
      specificationList: (state) => state.productionInfo.specificationList,
    }),
  },
  methods: {
    async editEvent() {
      delete this.editObj.gmtModified;
      delete this.editObj.applicant;
      delete this.editObj.status;
      delete this.editObj.warehouseName;
      delete this.editObj.baseName;
      console.log(this.editObj);
      const { data: res } = await editApplication(this.editObj);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("修改申请成功");
        this.$emit("close");
        this.$emit('getTableData');
      }
    },
    async getWareHouseInfoList() {
      const { data: res } = await getAllWarehouseInfo(this.editObj.baseName);
      console.log(res);
      this.wareHouseList = res.data;
      this.dialogInfo.warehouseName = '';
      this.editObj.warehouseId = '';
    },
    chooseWareHouse(index) {
      this.warehouseName = this.wareHouseList[index].name;
      this.editObj.warehouseId = this.wareHouseList[index].id;
      this.editObj.managerId = this.wareHouseList[index].managerId;
    },
    handle(id) {
      this.baseId = id;
      this.getWareHouseInfoList();
    },
    handlePicSuccess(res) {
      let pic = JSON.parse(res.data);
      this.editObj.picture = pic.url;
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>